<template>
  <div>
    <table>
      <thead>
        <th style="width: 100px">Date</th>
        <th style="width: 100px">Name</th>
        <th style="width: 300px">Address</th>
        <th>Tag</th>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.date" style="height: 50px">
          <td style="width: 100px">{{ item.date }}</td>
          <td style="width: 100px">{{ item.name }}</td>
          <td style="width: 300px">{{ item.address }}</td>
          <td>
            <!-- 作用域插槽传值，插槽传值是固定写法 -->
            <slot :row="item" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  data: Array<{ date: string; name: string; address: string; tag: string }>
}>()
</script>
